<template>
  <div class="orderList">
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
      height="550"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="订单ID" width="180">
        <template slot-scope="scope">
          <i class="el-icon-tickets"></i>
          <span style="margin-left: 10px">{{ scope.row.Orderid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.Name }}</p>
            <p>住址: {{ scope.row.Address + scope.row.AddressDetail }}</p>
            <p>电话:{{ scope.row.Phonenum }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.Username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商品ID" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>商品分类: {{ scope.row.cat_id }}</p>
            <p>商品名: {{ scope.row.goods_name }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.goods_id }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>单价: {{ scope.row.goods_price }}</p>
            <!-- <p>住址: {{ scope.row.address }}</p> -->
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">￥{{ scope.row.totalMoney }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>1->已下单</p>
            <p>2->已处理</p>
            <p>3->已完成</p>
            <p>4->退换货</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.Status }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="danger"
      class="delSelect"
      @click="delSelect(multipleSelection)"
      :disabled="isDisabled"
      >删除所选</el-button
    >
    <el-select
      v-model="options.value"
      placeholder="请选择"
      class="statusSelect"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button
      type="primary"
      class="delSelect"
      @click="multiStatus(multipleSelection)"
      :disabled="isDisabled"
      >批量处理</el-button
    >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[...pageArr]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 表单 -->
    <el-form
      v-show="isEdit"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item class="formTitle"
        ><i class="el-icon-edit"
          >{{ ruleForm.Orderid }}订单修改</i
        ></el-form-item
      >
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" prop="addressDetail">
        <el-input v-model="ruleForm.addressDetail"></el-input>
      </el-form-item>
      <el-form-item label="邮编" prop="postalCode">
        <el-input v-model="ruleForm.postalCode"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phoneNum">
        <el-input v-model="ruleForm.phoneNum"></el-input>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatu">
        <el-select v-model="ruleForm.orderStatu" placeholder="订单状态管理">
          <el-option :label="1" value="1">已下单</el-option>
          <el-option :label="2" value="2">已处理</el-option>
          <el-option :label="3" value="3">已完成</el-option>
          <el-option :label="4" value="4">退换货</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交修改</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="cancle()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      total: 0,
      limit: 10,
      page: 1,
      currentPage: 1,
      isDisabled: false,
      isEdit: false,
      orderObj: {},
      /* 表单数据 */
      ruleForm: {
        Orderid: "",
        address: "",
        addressDetail: "",
        postalCode: "",
        name: "",
        phoneNum: "",
        orderStatu: 1,
      },
      rules: {
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          { min: 6, message: "省市区地址", trigger: "blur" },
        ],
        addressDetail: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          { min: 3, message: "区内详细地址", trigger: "blur" },
        ],
        postCode: [
          { required: true, message: "请输入邮政编码", trigger: "blur" },
          { min: 6, message: "6位邮政编码", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" },
        ],
        phoneNum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, message: "请输入有效手机号码", trigger: "blur" },
        ],
        orderStatu: [
          { required: true, message: "请确认当前订单状态", trigger: "blur" },
        ],
      },
      /* 批量处理数据 */
      options: [
        {
          value: 1,
          label: "已下单",
          disabled: true,
        },
        {
          value: 2,
          label: "已处理",
        },
        {
          value: 3,
          label: "已完成",
        },
        {
          value: 4,
          label: "退换货",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      this.orderObj = row;
      this.isEdit = true;
      this.ruleForm.Orderid = row.Orderid;
      this.ruleForm.address = row.Address;
      this.ruleForm.addressDetail = row.AddressDetail;
      this.ruleForm.postalCode = row.PostalCode;
      this.ruleForm.name = row.Name;
      this.ruleForm.phoneNum = row.Phonenum;
    },
    handleDelete(index, row) {
      this.$request
        .post("/delOrder", {
          order_id: [row.Orderid],
        })
        .then((res) => {
          this.getList();
        });
    },
    delSelect(arr) {
      this.isDisabled = true;
      arr = arr.map((item) => item.Orderid);
      this.$request
        .post("/delOrder", {
          order_id: [...arr],
        })
        .then((res) => {
          console.log(res);
          this.getList();
          this.isDisabled = false;
        });
    },
    multiStatus(arr) {
      let orderArr = [];
      arr.forEach((item) => {
        let obj = {
          orderid: item.Orderid,
          status: this.options.value,
        };
        orderArr.push(obj);
      });
      this.$request
        .post("/updateOrderStatus", {
          orderArr: orderArr,
        })
        .then((res) => {
          this.options.value = "";
          this.getList();
        });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getList() {
      this.tableData = [];
      this.$request
        .get("getAllOrder", {
          params: {
            limit: this.limit,
            page: this.page,
          },
        })
        .then((res) => {
          this.total = res.data.total;
          res.data.data.forEach((item, index) => {
            if (
              index >= (this.page - 1) * this.limit &&
              index < this.page * this.limit
            ) {
              let orderObj = { ...item };
              this.tableData.unshift(orderObj);
            }
          });
        });
    },
    /* 表单方法 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   alert("submit!");
          const userInfo = JSON.parse(localStorage.getItem("userInfo"));
          this.$request
            .post(
              "/addAddress",
              {
                admin: userInfo.username,
                username: this.orderObj.Username,
                name: this.orderObj.Name,
                phonenum: this.orderObj.Phonenum,
                address: this.ruleForm.address,
                addressDetail: this.ruleForm.addressDetail,
                postalCode: this.ruleForm.postalCode,
                isDefault: this.orderObj.Isdefault,
                Addressid: this.orderObj.Addressid,
              },
              {
                headers: {
                  token: userInfo.token,
                },
              }
            )
            .then((res) => {
              //   this.getList();
            });
          this.$request
            .post("/updateOrderStatus", {
              orderArr: [
                {
                  orderid: this.ruleForm.Orderid,
                  status: this.ruleForm.orderStatu,
                },
              ],
            })
            .then((res) => {
              this.getList();
              this.isEdit = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cancle() {
      this.isEdit = false;
    },
  },
  computed: {
    pageArr() {
      let arr = [];
      /* 以固定值limit计算分页下拉选择框的数组 */
      for (let i = 1; i <= Math.ceil(this.total / 10); i++) {
        arr.push(i * 10);
      }
      return arr;
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style scoped lang="scss">
.delSelect {
  margin: 0.5rem 0.1rem;
}
.demo-ruleForm {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  background-color: #ccc;
  transform: translate(-50%, -50%);
  padding-right: 5rem;
}
.formTitle {
  text-align: center;
}
.statusSelect {
  margin-left: 0.8rem;
}
</style>
